<template>
    <div class='goods-relevant'>
        <div class="header">
            <i class="icon" />
            <span class="title">{{productId?'同类商品推荐':'猜你喜欢'}}</span>
        </div>
        <!-- 此处使用改造后的xtx-carousel.vue -->
        <Carousel :list="relevant" />
    </div>
</template>
  
<script setup>
import { getRelevant } from '@/api/product'
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
const sliceArr = (array = [], subGroupLength = 0) => {
    let index = 0;
    const newArray = [];
    while (index < array.length) {
        newArray.push(array.slice(index, index += subGroupLength));
    }
    return newArray;
}
const relevant = ref([])
onMounted(async () => {
    const { result: res } = await getRelevant(route.params.id || '', 16)
    relevant.value = sliceArr(res, 4)
})

const props = defineProps({
    productId: String
})
</script>
  
  <style lang='scss'>
  .goods-relevant {
      background: #fff;
      min-height: 460px;
      margin-top: 20px;
  
      .header {
          height: 80px;
          line-height: 80px;
          padding: 0 20px;
  
          .title {
              font-size: 20px;
              padding-left: 10px;
          }
  
          .icon {
              width: 16px;
              height: 16px;
              display: inline-block;
              border-top: 4px solid $mainColor;
              border-right: 4px solid $mainColor;
              box-sizing: border-box;
              position: relative;
              transform: rotate(45deg);
  
              &::before {
                  content: "";
                  width: 10px;
                  height: 10px;
                  position: absolute;
                  left: 0;
                  top: 2px;
                  background: lighten($mainColor, 40%);
              }
          }
      }
  
      .carousel {
          height: 380px;
  
          &-indicator {
              bottom: 30px;
  
              span {
                  &.active {
                      background: $mainColor;
                  }
              }
          }
  
          &-btn {
              top: 110px;
              opacity: 1;
              background: rgba(0, 0, 0, 0);
              color: #ddd;
  
              i {
                  font-size: 30px;
              }
          }
      }
  }
  </style>